<template>
  <div class="welcome-page">
    <div class="content">
      <h2>欢迎访问学院管理系统</h2>
      <p>感谢您的访问！这是一个专业的学院管理系统，旨在帮助您高效地管理学院信息。</p>
      <p>我们致力于提供最优质的服务，帮助您轻松管理各种学院相关事务。</p>
      <p>如果您有任何疑问或建议，请随时联系我们。</p>
    </div>
    <div v-hasRole="['teacher']">
      老师登录首页
    </div>
    <div v-hasRole="['student']">
      学生登录首页
    </div>
  </div>
</template>

<script>
export default {
  name: 'WelcomePage',
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>

<style scoped>
.welcome-page {
  /* 设置背景图片 */
  background-image: url('src/assets/images/background1.png');
  background-position: center center; /* 图片居中 */
  background-repeat: no-repeat; /* 不重复图片 */
  background-size: cover; /* 背景图片覆盖整个容器 */
  height: 100vh; /* 设置容器高度为视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  max-width: 600px;
  padding: 20px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7); /* 添加半透明背景以便文字更易读 */
  backdrop-filter: blur(1px); /* 可选：给内容区域添加模糊背景效果 */
}

h2 {
  color: #ff9900;
  font-size: 24px;
}
</style>



